<script lang="ts">
	import { onMount } from 'svelte';

	export let direction: 'vertical' | 'horizontal' = 'horizontal';

	$: DividerStyle = {
		color: 'var(--mdc-theme-primary)',
		width: direction === 'vertical' ? '0' : '100% !important',
		height: direction === 'vertical' ? '100%' : '0',
		padding: direction === 'vertical' ? '0' : '0.5rem 0'
	};

	export let style = '';

	const mergeStyles = (style1: string, ...styles: string[]): string => {
		return styles.reduce((acc, style) => {
			return (acc += ';' + style);
		}, style1);
	};

	// style={DividerStyle.entry(i => `${i}: ${DividerStyle[i]}`).join(';')}
</script>

<div
	class="h-1px w-0 min-h-1em"
	style={mergeStyles(
		Object.entries(DividerStyle)
			.map(([key, value]) => `${key}: ${value}`)
			.join(';'),
		style
	)}
>
	{#if direction === 'vertical'}<div
			class="divider-line__vertical relative"
			style="width: 0; height: 100%; border-color: gray;"
		></div>
	{:else}
		<div class="divider-line" style="width: 100%; border-color: gray;"></div>
	{/if}
</div>

<style>
	.divider-line {
		--width: '0';
		--height: '0';
		--border-top: '0';
		--border-right: '0';
		position: relative;

		&::after {
			content: '';
			width: 100%;
			height: 1px;
			border-top: 1px solid var(--mdc-theme-primary);
			display: block;
			top: 0;
			left: 0;
			transform: translate(0, -50%);
			z-index: 9999;
		}
	}

	.divider-line__vertical {
		&::after {
			content: '';
			width: 0;
			height: 80%;
			border-right: 1px solid var(--mdc-theme-primary);
			display: block;
			top: 0;
			left: 0;
			transform: translate(0, 10%);
			z-index: 9999;
		}
	}
</style>
